<template>
  <div class="img-Show-box">
    <viewer :options="options" :images="images">
      <img v-show="index == 0" v-for="(src, index) in images" :key="index"
           :src="src ? ('/api/ms-mongodb/file/download?fileId=' + src) : 'http://www.placehold.it/200x148/EFEFEF/AAAAAA&amp;'"
           :data-original="src">
    </viewer>
  </div>
</template>

<script>
import Viewer from 'v-viewer/src/component.vue'

export default {
  name: 'imgViewer',
  props: {
    imgArr: {
      type: [Array, String],
      default: function() {
        return []
      }
    }
  },
  components: {
    Viewer
  },
  data() {
    return {
      options: {
        toolbar: true,
        navbar: true
      }
    }
  },
  computed: {
    images() {
      if (Array.isArray(this.imgArr)) {
        return this.imgArr
      } else {
        return this.imgArr.split(',')
      }
    }
  }
}
</script>

<style scoped lang="scss">
  .img-Show-box {
    width: 100%;
    height: 100%;
    display: inline-block;
    div {
      height: 100%;
    }
  }
</style>
